<template>
  <a-row ref="sss">
  	<a-col :span="8" @click="onClick(2)" class="radius_col">
  		<a-badge title="总台数" showZero :count="allcomputed" :numberStyle="{backgroundColor: '#fff',zIndex:'0', color: '#808080', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
  	</a-col>
  	<a-col :span="8" @click="onClick(1)" class="radius_col">
  		<a-badge title="在线" showZero :count="isOnLineData.onLine" :numberStyle= "{backgroundColor: '#52c41a',zIndex:'0'}" />
  	</a-col>
  	<a-col :span="8" @click="onClick(0)" class="radius_col">
  		<a-badge title="离线" showZero :count="isOnLineData.offLine" :numberStyle= "{zIndex:'0'}"/>
  	</a-col>
  </a-row>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'Prompter',
  props: {
    onLine: {
      type: Number,
    },
    offLine: Number,
    all: Number,
  },
  computed: {
  	...mapState({
  		isOnLineData: state => state.equipment.isOnLineData,
    }),
    allcomputed(){
      return this.isOnLineData.onLine + this.isOnLineData.offLine
    }
  },
  data() {
    return {
      // onLineData: 0,
      // offLineData: 0
    };
  },
  mounted() {
    this.isOnLine()
  },
  methods: {
    ...mapActions({
      isOnLine: 'equipment/isOnLine',     //设备在线状态
    }),
    onClick(type){
      this.$emit('search',type )
    }
  }
};
</script>
<style lang="stylus" scoped>
	.radius_col {
		padding: 0 15px;
		border:1px solid #cccccc;
		height: 2rem;
		text-align: center;
		line-height: 1.5rem;
	}
</style>
